<template>
  <div class="material-wrap">

    <div class="material-box">
      <div class="photo-box">
        <span class="title">头像</span>
        <img class="photo" :src="portrait" v-if="portrait"/>
        <div class="photo" v-else></div>
        <input type="file" class="photo-box" @change="changeImage($event)"
               accept="image/*"/>
      </div>

      <div class="content-box">
        <span class="title">昵称</span>
        <div class="content">
          <input type="text" class="nick" placeholder="请输入昵称" maxlength="11" v-model="nickname"/>
        </div>
        <img src="../../images/in.png" class="pic"/>
      </div>

      <div class="content-box">
        <span class="title">性别</span>
        <popup-picker :data="genderList" v-model="gender" class="pop-sex" placeholder="请选择性别"></popup-picker>
        <img src="../../images/in.png" class="pic"/>
      </div>
    </div>

    <button class="sure-text" type="button" @click="saveProfile">保&nbsp;&nbsp;存</button>
  </div>
</template>

<script>
  import {getBase64, convertBase64ToBlob} from "../../config/util"
  import {getQiniuToken, modifyMaterial, selectMaterial} from "../../axios/api"
  import * as qiniu from 'qiniu-js'
  import {checkNick} from "../../config/verify"
  import {PopupPicker} from 'vux'

  export default {
    data() {
      return {
        portrait: "",
        nickname: "",
        gender: [],
        genderList: [['男', '女']],
        userMark: ""
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
    },
    mounted() {
      this.queryMaterial();
    },
    methods: {
      queryMaterial() {//获取个人资料
        let params = {
          "sgin": this.userMark,
          "id": this.userMark,
        };
        selectMaterial(params).then((res) => {
          if (res.code == 0 && res.data != null) {
            this.nickname = res.data.userName;//昵称
            this.portrait = res.data.userUrl;//用户头像
            this.userSex = res.data.userSex;//0未知1男2女
            if (this.userSex != 2) {
              this.gender.push("男");
            } else {
              this.gender.push("女");
            }
          }
        });
      },
      changeImage(e) {//上传图片到七牛云
        if (e.target.files.length > 0) {
          getBase64(e.target, (url) => {
            this.portrait = 'data:image/png;base64,' + url;//显示图片

            let params = {
              "sgin": this.userMark
            };
            getQiniuToken(params).then((res) => {//获取uploadToken
              let resultObj = res.data;
              let file = convertBase64ToBlob(this.portrait); //Blob 对象，上传的文件
              let key = null; // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
              let config = {
                useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
                region: qiniu.region.z2 // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域};
              };

              let putExtra = {
                fname: "", //文件原文件名
                params: {}, //用来放置自定义变量
                mimeType: null //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
              };
              let observable = qiniu.upload(file, key, resultObj, putExtra, config);

              observable.subscribe({
                next: (res) => {//主要用来展示进度
                  let total = res.total;
                },
                error: (err) => {//失败报错信息
                  this.$vux.toast.text("图片上传失败，请重试[" + err.message + "]", "middle");
                },
                complete: (res) => {//接收成功后返回的信息
                  this.portrait = "http://pic.lanpin123.com/" + res.hash;
                }
              })
            });
          })
        }
      },
      saveProfile() {//保存个人资料
        let nick = this.nickname;
        if (checkNick(nick)) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let params = {
            "sgin": this.userMark,
            "userName": nick,
            "userUrl": this.portrait,
            "userSex": String(this.gender) == '男' ? 1 : 2
          };
          modifyMaterial(params).then((res) => {
            if (res.code == 0) {
              if(res.data == 1){
                this.$router.push('/mine');
              }else{
                this.$vux.toast.text("个人资料修改失败，请重试", "middle");
              }
            } else {
              this.$vux.toast.text(res.msg, "middle");
            }
          })
        }
      }
    },
    components: {
      PopupPicker
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .material-wrap {
    .who(100%, 100%, hidden);
    background: @talent-theme-bg-color;
    .material-box {
      margin-bottom: 1.6rem;
      .wh(100%, auto);
      background: @talent-bg-color;
      .photo-box {
        .fj(center, space-between);
        margin-left: 3.2%;
        .wh(96.8%, 2rem);
        border-bottom: @talent-border-bottom;
        .photo {
          margin-right: 0.32rem;
          .wh(1.6rem, 1.6rem);
          background: @talent-theme-bg-color;
          .border-radius(50%);
        }
        .photo-box {
          position: absolute;
          top: 0.2rem;
          right: 0.32rem;
          z-index: 999;
          margin: 0 auto;
          .wh(1.587rem, 1.587rem);
          opacity: 0;
          -ms-filter: 'alpha(opacity=0)';
        }
      }
      .content-box {
        .fj(center, space-between);
        margin-left: 3.2%;
        .wh(96.8%, 1.333rem);
        border-bottom: @talent-border-bottom;
        &:last-child {
          border-bottom: none;
        }
        .content {
          text-align: right;
          display: flex;
          align-items: center;
          flex: 1;
          height: 1.333rem;
          .nick {
            text-align: right;
            padding-right: 0.36rem;
            .wh(100%, 0.6rem);
            line-height: 0.6rem;
            .size-color(0.427rem, #333);
          }
        }
        .pic {
          margin-right: 0.32rem;
          .wh(0.32rem, 0.32rem);
        }
        .pop-sex {
          display: flex;
          align-items: center;
          margin-left: auto;
          margin-right: 0.36rem;
          .size-color(0.427rem, rgba(102, 102, 102, 1));
          flex: 1
        }
        .pop-sex /deep/ .vux-tap-active {
          width: 100%;
        }
        .pop-sex /deep/ .vux-cell-primary .vux-popup-picker-select {
          text-align: right !important;
        }
        .pop-sex /deep/ .vux-cell-primary .vux-popup-picker-placeholder {
          color: #ccc;
        }
        .pop-sex /deep/ .vux-cell-primary .vux-cell-value {
          color: #333;
        }
      }
      .title {
        .size-color(0.427rem, rgba(51, 51, 51, 1));
      }
    }

    .sure-text {
      .fj(center, center);
      margin: 0 auto;
      .wh(9.04rem, 1.333rem);
      background: rgba(60, 175, 255, 1);
      border-radius: 0.107rem;
      .size-color(0.48rem, rgba(255, 255, 255, 1));
    }
  }
</style>
